<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>情人节快乐</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #ff9a9e, #fad0c4); /* 渐变色背景 */
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            text-align: center;
            position: relative;
            z-index: 2;
        }
        h1 {
            font-size: 4rem;
            color: #fff;
            text-shadow: 0 0 10px #ff6f61, 0 0 20px #ff6f61, 0 0 30px #ff6f61;
            animation: glow 2s infinite alternate;
        }
        @keyframes glow {
            0% {
                text-shadow: 0 0 10px #ff6f61, 0 0 20px #ff6f61, 0 0 30px #ff6f61;
            }
            100% {
                text-shadow: 0 0 20px #ff6f61, 0 0 40px #ff6f61, 0 0 60px #ff6f61;
            }
        }
        .heart {
            color: #ff6f61;
            font-size: 5rem;
            animation: heartbeat 1.5s infinite;
        }
        @keyframes heartbeat {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.2);
            }
        }
        .falling-hearts {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }
        .falling-hearts span {
            position: absolute;
            color: #ff6f61;
            font-size: 2rem;
            animation: falling 5s linear infinite;
        }
        @keyframes falling {
            0% {
                transform: translateY(-10%);
            }
            100% {
                transform: translateY(110%);
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h1>祝<span id="name">潘茹</span>情人节快乐！</h1>
    <div class="heart">❤️</div>
    <p style="color: #fff; font-size: 1.5rem;">愿你的每一天都充满爱与幸福！</p>
</div>

<!-- 飘落的心形 -->
<div class="falling-hearts">
    <!-- 随机生成心形 -->
    <script>
        for (let i = 0; i < 50; i++) {
            const heart = document.createElement('span');
            heart.innerHTML = '❤️';
            heart.style.left = Math.random() * 100 + 'vw';
            heart.style.animationDuration = Math.random() * 3 + 2 + 's';
            heart.style.fontSize = Math.random() * 2 + 1 + 'rem';
            document.querySelector('.falling-hearts').appendChild(heart);
        }
    </script>
</div>

<!-- 背景音乐 -->
<audio autoplay loop>
    <source src="http://lv.sycdn.kuwo.cn/4d8416a0a5608a8d4ca9211895ee57c1/67aef901/resource/30106/trackmedia/M500001YVGjM4Y8Lqo.mp3" type="audio/mpeg">
    您的浏览器不支持音频播放。
</audio>

<script>
    // 动态修改名字
   <!-- const name = prompt("请输入名字：");
    if (name) {
        document.getElementById('name').textContent = name;
    }-->
</script>
</body>
</html>